<template>
  <div>

    <div style="margin: 10px">
      <el-input style=" width: 200px" placeholder="请输入名称搜索" v-model="userName" suffix-icon="el-icon-search"></el-input>
      <el-input style=" width: 200px" placeholder="请输入id搜索"  v-model="userId" suffix-icon="el-icon-user" class="ml-5"></el-input>
      <!--          <el-input style=" width: 200px" placeholder="请输入手机号搜索"  v-model="phone" suffix-icon="el-icon-phone" class="ml-5"></el-input>-->
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button  type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px">
      <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="确定删除这批用户数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
      <el-button type="primary" @click="exp" class="ml-5">导出<i class="el-icon-top"></i></el-button>
      <el-upload action="http://localhost:9090/import" style="display: inline-block" :show-file-list="false" :accept="'xlsx'" :on-success="handleImport" :on-error="handleImpFail">
      <el-button type="primary" @click="imp" class="ml-5">导入<i class="el-icon-bottom"></i></el-button>
      </el-upload>
    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="headerbg" :cell-style="cellStyle"   @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
      >
      </el-table-column>
      <el-table-column prop="userId" label="id" width="80">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column prop="phone" label="手机">
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号">
      </el-table-column>
      <el-table-column prop="account" label="余额">
      </el-table-column>
      <el-table-column prop="bindStatus" label="绑定状态" :formatter="formatBoolean" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.bindStatus==true">
            已绑定
          </el-tag>
            <el-tag type="danger" v-if="scope.row.bindStatus==false">
              未绑定
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间">
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该用户数据吗？"
              @confirm="del(scope.row.userId)"
          >
            <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名称" >
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" >
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" >
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户身份验证状态" >
          <el-input v-model="form.bindStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户地址" >
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户余额" >
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save" >确 定</el-button>

      </div>
    </el-dialog>
  </div>
</template>


<script>

import request from "@/util/request";

export default {
  name:"User",
  // props:{
  //   collapseBtnClass:String,
  //   collapse:Boolean
  // }
  data(){
    return{
      tableData: [],
      total:0,
      pageNum:1,
      pageSize:10,
      userName:"",
      userId:'',
      phone:'',
      dialogFormVisible:false,
      form:{},
      multipleSelection:[],
      headerbg: 'headerbg'
    }
  },
  created() {
    this.load()
  },
  methods:{

    load(){
      // fetch(`http://localhost:9090/user/page?pageNum=${this.pageNum}&pageSize=${this.pageSize}&userName=${this.userName}&userId=${this.userId}`).then(res =>res.json()).then(res=>{
      //       console.log(res),
      //           this.tableData=res.records,
      //           this.total=res.total
      //     }
      // )
      request.get("/user/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          userName:this.userName,
          userId:this.userId
          // phone:this.phone

        }
      }).then(res=>{

            this.tableData=res.records,
                this.total=res.total
          }

      )
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.load()
    },
    reset(){
      this.userId="",
          this.userName="",
          // this.phone="",
          this.load()
    },
    save(){
      request.post("/saveUser",this.form).then(res=>{
        console.log(this.form)
        if(res){
          this.$message.success("保存成功！")
          this.dialogFormVisible=false;
          this.load()
        }else {
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd(){
      this.dialogFormVisible=true,
          this.form={}

    },
    handleEdit(row){
      this.dialogFormVisible=true,
          this.form=row
    },
    del(id){
      request.delete("/deleteUser/"+id).then(res=>{
        if(res){
          this.$message.success("删除成功！")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    delBatch(){
      const ids =this.multipleSelection.map(v=>v.userId)
      request.post("/deleteBatch",ids).then(res=>{
        if(res){
          this.$message.success("批量删除成功！")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
    },
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection=val
    },
    formatBoolean: function (row) {
      let ret = ''
      if (row.bindStatus === true) {
        ret = "已绑定" //根据自己的需求设定
      } else {
        ret = "未绑定"
      }
      return ret;
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      // 状态列字体颜色
      if (row.bindStatus === '已绑定'&&column.label==="绑定状态") {
        return 'color: #0CB618'
      } else if (row.bindStatus === '未绑定'&& column.label==="绑定状态") {
        return 'color: #EA1B29'
      } else {
        return 'color: #1a1a1b'
      }
    },
    exp() {
      window.open("http://localhost:9090/export")
    },
    handleImport(){
      this.$message.success("导入数据成功")
      this.load()
    },
    handleImpFail(){
      this.$message.error("导入失败,用户名重复")
      this.load()
    }


  }
}

</script>

<style>
.headerbg {
  background-color: #cccccc !important;
}
</style>